<template>
  <div class="Material-right">
    <div id="tabs-box">
      <div class="title clearfix">
        <div class="title-left">
          回收站
          <p>删除后的文章或图片在回收站会永久保存，彻底删除请手动操作</p>
        </div>
      </div>
      <!--tabs-->


      <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
        <!--已删文章-->
        <el-tab-pane label="已删文章" name="first">
          <ul class="del-article" v-loading="loadingArt">
            <li class="del-article-list" v-for="(item,index) in DelArticle">
              <div class="del-article-box">
                <img v-show="item.coverUrl" :src="item.coverUrl"/>
                <img v-show="!item.coverUrl" src="../../assets/images/default2.png"/>
              </div>
              <div class="del-article-detail">
                <h3>{{item.title}}</h3>
                <p class="del-article-content">
                  {{item.origContent}}
                </p>
                <ul class="del-article-from">
                  <li>
                    <span>{{item.articleLabelName}}</span>
                    <span>所属文件夹：{{item.folderName}}</span>
                  </li>
                  <li>
                    <button @click="reFolder(index)">恢复到原目录</button>
                    <button @click="foreverFolDel(index)">永久删除</button>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
          <div class="self-pagination" v-show="DelArticle.length">
            <pagination :total="delArtTO" :pageSize='10' :currentPg='pageArt'
                        @currentChange="handleCurrentArtChange"></pagination>
          </div>

          <!--刘一丁新增 无内容提示-->
          <div class="nocontent-tips" v-show="artIsNull">
            <img src="../../assets/images/no-trash.png"/>
            <p>您的回收站里还没有任何内容</p>
          </div>
        </el-tab-pane>
        <!--已删图片-->

        <el-tab-pane label="已删图片" name="second">
          <div class="img-list" v-loading="loadingImg">
            <ul class="clearfix">
              <li v-for="(item,index) in imgList" :class="{isBlock:index === imgListNum}">
                <div class="img-box">
                  <img v-show="item.url" :src="item.url"/>
                  <img v-show="!item.url" src="../../assets/images/default2.png"/>
                </div>
                <span>{{item.materialName}}</span>
                <div class="layer">
                  <div class="del-img" @click="foreverImgDel(index)">
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-trash"></use>
                    </svg>
                  </div>
                  <div class="new-name" @click="reImg(index)">
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-corner-up-left"></use>
                    </svg>
                  </div>
                  <!--<div class="old-from">原目录:{{item.categoryName}}</div>-->
                </div>
              </li>
            </ul>
          </div>
          <div class="self-pagination" v-show="imgList.length">
            <pagination :total="delImgTO" :currentPg='pageMat' :pageSize="30"
                        @currentChange="handleCurrentImgChange"></pagination>
          </div>

          <!--刘一丁新增 无内容提示-->
          <div class="nocontent-tips" v-show="imgIsNull">
            <img src="../../assets/images/no-trash.png"/>
            <p>您的回收站里还没有任何内容</p>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import util from '../../lib/util'
  import pagination from '../common/pagination.vue'

  export default {
    name: 'MaterialRight',
    components: {
      pagination
    },
    data() {
      return {
        //已删除文件列表
        imgList: [],
        imgListNum: '',
        activeName2: 'first',
        // 已删除文章列表
        DelArticle: [],

        DelArticleNum: '', //控制样式,
        //素材总条数
        delImgTO: 1,
        //文章删除总条数
        delArtTO: 1,
        pageArt: 1,
        pageMat: 1,
        loadingImg: false,
        loadingArt: false,
        artIsNull: false,
        imgIsNull: false

      }
    },
    created() {
      this.ajaxDelArtList();

    },
    methods: {

      //永久删除img
      foreverImgDel: function (index) {
        let data = this.imgList[index];
        let params = {
          "materialId": data.materialId,
          "categoryId": data.categoryId,
          "materialName": data.materialName,
          "materialUrl": data.materialUrl,
          "materialType": data.materialType,
          isDel: 1
        };
        util.ajax.post('material/update', {
          ...params
        }).then((res) => {

          if (index == 0 && this.imgList.length <= 1 && this.pageArt >= 2) {
            this.pageArt = this.pageMat - 1;
          }
          this.handleCurrentImgChange(this.pageMat);
          this.imgList.splice(index, 1);

        })
      },
      //恢复图片
      reImg: function (index) {
        let data = this.imgList[index];
        let params = {
          "materialId": data.materialId,
          "categoryId": data.categoryId,
          "materialName": data.materialName,
          "materialUrl": data.materialUrl,
          "materialType": data.materialType,
          isDel: 0
        };
        util.ajax.post('material/update', {
          ...params
        }).then((res) => {


          if (index == 0 && this.imgList.length <= 1 && this.pageArt >= 2) {
            this.pageArt = this.pageMat - 1;
          }

          this.handleCurrentImgChange(this.pageMat);
          this.imgList.splice(index, 1);

        })
      },
      // 恢复文章
      reFolder: function (index) {

        let data = this.DelArticle[index];
        let params = {
          id: data.articleId,
          isDel: 0
        };
        util.ajax.post('article/update', {
          ...params
        }).then((res) => {

          if (index == 0 && this.DelArticle.length <= 1 && this.pageArt >= 2) {
            this.pageArt = this.pageArt - 1;
          }
          this.handleCurrentArtChange(this.pageArt);
          this.DelArticle.splice(index, 1);

        })
      },
      // 永久删除文章
      foreverFolDel: function (index) {

        let data = this.DelArticle[index];
        let params = {
          id: data.articleId,
          isDel: 1
        };
        util.ajax.post('article/update', {
          ...params
        }).then((res) => {


          if (index == 0 && this.DelArticle.length <= 1 && this.pageArt >= 2) {
            this.pageArt = this.pageArt - 1;
          }
          this.handleCurrentArtChange(this.pageArt);
          this.DelArticle.splice(index, 1);

        })
      },
      handleClick(tab, event) {
        if (this.activeName2 == 'first') {

          this.pageArt = 1;
          this.ajaxDelArtList();

        } else {

          this.pageMat = 1;
          this.ajaxDelImgList();
        }
      },

      //获取已删除的素材列表
      ajaxDelImgList: function () {
        let params = {
          "isDel": 2,
          "pageNo": 1,
          "pageSize": 30
        };

        util.ajax.post('material/list', {
          ...params
        }).then((res) => {

          if (res.data) {

            if (!res.data.list.length) {
              this.imgIsNull = true;
            }

            this.imgList = res.data.list || [];

            this.delImgTO = res.data.total;
          }

        })
      },
      // 获取图片素材
      handleCurrentImgChange: function (page) {


        this.pageMat = page;
        let params = {
          "isDel": 2,
          "pageNo": page,
          "pageSize": 30
        };

        this.loadingImg = true;
        util.ajax.post('material/list', {
          ...params
        }).then((res) => {

          this.loadingImg = false;
          if (res.data) {
            if (page == 1 && !res.data.list.length) {
              this.imgIsNull = true;
            }
            this.imgList = res.data.list || [];
            this.delImgTO = res.data.total;
          }
        })

      },
      //获取已删除的文章列表
      ajaxDelArtList: function () {
        let params = {
          "isDel": 2,
          "pageNo": 1,
          "pageSize": 10,
          "orderType": 1,
        };
        util.ajax.post('article/list', {
          ...params
        }).then((res) => {

          if (res.data) {

            if (!res.data.list.length) {
              this.artIsNull = true;
            }

            this.DelArticle = res.data.list || [];
            this.delArtTO = res.data.total;

          }

        })
      },
      handleCurrentArtChange: function (page) {


        this.pageArt = page;

        let params = {
          "isDel": 2,
          "pageNo": page,
          "pageSize": 10,
          "orderType": 1,
        };
        this.loadingArt = true;
        util.ajax.post('article/list', {
          ...params
        }).then((res) => {

          if (res.data) {

            if (page == 1 && !res.data.list.length) {
              this.artIsNull = true;
            }
            this.loadingArt = false;
            this.DelArticle = res.data.list || [];
            this.delArtTO = res.data.total;
          }

        })
      }

    }
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/style.scss";

  .Material-right {
    position: absolute;
    bottom: 0px;
    top: 83px;
    right: 0px;
    left: 240px;
    z-index: l0;

    @include flexbox;
    /*@include flex-direction(column)*/
    #tabs-box {
      @include flexbox;
      @include flex-direction(column)
      @include flex(1);
    }
    .title {
      padding: 15px 0px;
      overflow: hidden;
      .title-left {
        float: left;
        font-size: $fs24;
        color: $listTitleColor;
        line-height: 40px;
        p {
          margin-top: 5px;
          font-size: $fs14;
          line-height: 20px;
          color: $vfConcentColor;
        }
      }
      .upload-img {
        float: right;
        margin-top: 12px;
        width: 160px;
        line-height: 38px;
        text-align: center;
        font-size: $fs16;
        border: 1px solid $listborderColor;
        border-radius: 20px;
      }
    }
    .img-list {
      width: 100%;
      padding: 20px 0px 80px;
      .isBlock {
        input {
          border: 1px solid $vfConcentColor;
        }
        &:hover {
          .layer {
            display: none !important;
          }
        }
      }
      li {
        position: relative;
        margin: 0px 20px 10px 0px;
        padding-bottom: 5px;
        float: left;
        width: 160px;
        &:hover {
          .layer {
            display: block;
          }
        }
        .img-box {
          margin-bottom: 5px;
          width: 100%;
          height: 100px;
          border: 1px solid $borderbottomColor;
          box-sizing: border-box;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        input {
          /*border: 1px solid $vfConcentColor;*/
          border: none;
          width: 100%;
          text-align: center;
          height: 30px;
          color: $mainborderColor;
        }
        span {
          display: block;
          width: 100%;
          text-align: center;
          color: $mainborderColor;
          height: 30px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .layer {
          display: none;
          position: absolute;
          top: 1px;
          left: 0px;
          right: 1px;
          z-index: 2;
          height: 20px;
          .del-img,
          .new-name {
            opacity: 0.3;
            background: #000000;
            line-height: 30px;
            text-align: center;
            float: right;
            width: 30px;
            height: 30px;
            cursor: pointer;
            .icon {
              font-size: $fs20;
              color: $colorWhite;
            }
          }
        }
      }
    }
    .del-article {
      padding-bottom: 80px;
      .del-article-list {
        &:hover {
          padding: 9px 0px 3px;
          background: #F8F8F8;
          .del-article-from {
            button {
              display: block !important;
              float: left;
            }
          }
        }
        padding: 9px 0px 10px;
        overflow: hidden;
        border-bottom: 1px solid #E9E9E9;
        .del-article-box {
          margin-right: 20px;
          float: left;
          width: 160px;
          height: 100px;
          img {
            width: 100%;
            height: 100%;
            /*border: 1px solid $listTitleColor;*/
          }
        }
        .del-article-detail {
          overflow: hidden;
          h3 {
            display: inline-block;
            font-size: $fs18;
            line-height: 30px;
            color: $listTitleColor;
            font-weight: normal;
          }
          .del-article-content {
            margin-bottom: 5px;
            font-size: 14px;
            color: $vfConcentColor;
            line-height: 20px;
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
          }
          .del-article-from {
            overflow: hidden;
            li {
              &:first-child {
                float: left;
                span {
                  display: inline-block;
                  width: 200px;
                  font-size: $fs14;
                  line-height: 20px;
                  color: $listTitleColor;
                  &:last-child {
                    margin-right: 40px;
                  }
                }
              }
              &:last-child {
                float: right;
                button {
                  display: none;
                  padding: 0px 15px;
                  margin-right: 10px;
                  line-height: 30px;
                  border-radius: 15px;
                  color: $listTitleColor;
                  font-size: $fs14;
                  background: $colorWhite;
                  border: 1px solid $listborderColor;
                  &:last-child {
                    margin-right: 20px;
                    font-size: $fs14;
                    border: 1px solid #3c4b68;
                    background: #3c4b68;
                    color: $colorWhite;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
